<template>
    <div class="search-history">
        <div class="search-near">
            <van-cell title="最近搜索" value="内容">
                <template v-slot:value>
                    <van-icon name="delete-o" @click="wordsList=[]"  />
                </template>
            </van-cell>
            <div class="search-near-list">
                <van-space>
                    <!-- @click="$emit('search',item)" -->
                    <van-tag v-for="item,index in wordsList" :key="index" size="medium" text="#f0f2f5"  text-color="#fff" closeable @close="closeHandler(item)" @click="clickHandler(item)">{{ item }}</van-tag>
                </van-space>
            </div>
        </div>
        <div class="search-hot">
            <van-cell title="热门搜索" value="内容">
                <template v-slot:value>
                    <span>隐藏</span>
                </template>
            </van-cell>
            <div class="search-hot-list">
                <van-space>
                    <!-- @click="$emit('search',item)" -->
                    <van-tag v-for="item,index in hotList" :key="index" size="medium" text="#f0f2f5"  text-color="#fff"   @click="clickHandler(item.keyword as string)">{{ item.keyword }}</van-tag>
                </van-space>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import type { ComponentInternalInstance} from 'vue';
    import {ref,toRefs ,onMounted, getCurrentInstance} from 'vue';
    import { useSearchStore } from '@/stores/search';
    import {getProHotwordAPI} from "@/api/pro"

    const app = getCurrentInstance();
    console.log(app);
    
    const ctx = (app as any).ctx;  // 当前组件的proxy对象
    const searchStore = useSearchStore();
    const {wordsList} = toRefs(searchStore);  // 保持响应性
    const hotList = ref<{
        wordid:string,
        keyword?:string,
        num:number,
    } []>([]);



    let closeHandler = (word:string)=>{
        searchStore.delWord(word);
    }

    let clickHandler = (word:string)=>{
        ctx.$emit('search',word)
    }

    let getProHotword = async ():Promise<any> =>{
        try{
            const res = await getProHotwordAPI();
            console.log("搜索热词",res);
            
            hotList.value = res.data;
        }catch(err){
            console.log(err);
            
        }
    }

    onMounted(()=>{
        getProHotword();
    })

</script>

<style lang="scss" scoped>
    .search-near-list,.search-hot-list{
        padding: 0 0.2rem;
    }
</style>